import { Module } from 'vuex'
import Cookies from 'js-cookie'

import { State as RootState } from '../index'
import { Log } from '@/utils/useSocket'

type DeviceType = 'desktop' | 'mobile'
type SizeType = 'mini' | 'medium' | 'large'

export interface State {
  sidebar: {
    opened: boolean
    withoutAnimation: boolean
  }
  expand: {
    opened: boolean
  }
  device: DeviceType
  size: SizeType
  logs: Log[]
}

export enum MutationTypes {
  TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR',
  TOGGLE_EXPAND = 'TOGGLE_EXPAND',
  CLOSE_SIDEBAR = 'CLOSE_SIDEBAR',
  TOGGLE_DEVICE = 'TOGGLE_DEVICE',
  SET_SIZE = 'SET_SIZE',
  ADD_LOG = 'ADD_LOG'
}

type AugmentedActionContext = {
  // eslint-disable-next-line
  commit(key: MutationTypes, p?: any): void
}
const state = (): State => ({
  sidebar: {
    opened: Cookies.get('sidebarStatus')
      ? !!Cookies.get('sidebarStatus')
      : true,
    withoutAnimation: false
  },
  expand: {
    opened: Cookies.get('expandStatus') ? !!Cookies.get('expandStatus') : false
  },
  device: 'desktop',
  size: 'mini',
  logs: []
})

const mutations = {
  [MutationTypes.TOGGLE_SIDEBAR]: (state: State): void => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', '1')
    } else {
      Cookies.set('sidebarStatus', '0')
    }
  },
  [MutationTypes.TOGGLE_EXPAND]: (state: State): void => {
    state.expand.opened = !state.expand.opened
    if (state.expand.opened) {
      Cookies.set('expandStatus', '1')
    } else {
      Cookies.set('expandStatus', '0')
    }
  },
  [MutationTypes.CLOSE_SIDEBAR]: (
    state: State,
    withoutAnimation: boolean
  ): void => {
    Cookies.set('sidebarStatus', '0')
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  [MutationTypes.TOGGLE_DEVICE]: (state: State, device: DeviceType): void => {
    state.device = device
  },
  [MutationTypes.SET_SIZE]: (state: State, size: SizeType): void => {
    state.size = size
    Cookies.set('size', size)
  },
  [MutationTypes.ADD_LOG]: (state: State, log: Log): void => {
    state.logs.unshift(log)
  }
}

const actions = {
  toggleSideBar(context: AugmentedActionContext): void {
    context.commit(MutationTypes.TOGGLE_SIDEBAR)
  },
  toggleExpand(context: AugmentedActionContext): void {
    context.commit(MutationTypes.TOGGLE_EXPAND)
  },
  closeSideBar(
    context: AugmentedActionContext,
    { withoutAnimation }: { withoutAnimation: boolean }
  ): void {
    context.commit(MutationTypes.CLOSE_SIDEBAR, withoutAnimation)
  },
  toggleDevice(context: AugmentedActionContext, device: DeviceType): void {
    context.commit(MutationTypes.TOGGLE_DEVICE, device)
  },
  setSize(context: AugmentedActionContext, size: SizeType): void {
    context.commit(MutationTypes.SET_SIZE, size)
  },
  addlog(context: AugmentedActionContext, log: Log): void {
    context.commit(MutationTypes.ADD_LOG, log)
  }
}

const AppModule: Module<State, RootState> = {
  namespaced: true,
  state,
  mutations,
  actions
}

export default AppModule
